<template>
    <layout-default
            name="index"
            ref="layout"
            :loaded="loaded"
            :top-method="refresh"
            :bottom-method="loadMore">
        <div class="index-header" slot="header">
            <div class="h-search">
                <div class="s-box" @click="go('/search')">
                    <i class="iconfont icon-sousuo"></i>
                    <span>tensorflow训练自己的目标检测模型</span>
                </div>
                <div class="s-btn">
                    <i class="iconfont icon-fabiaoyouji"></i>
                </div>
            </div>
            <div class="h-tab">
                <div class="t-item"
                     :class="{'t-item-active': form.type == 0}"
                     @click="changeType(0)">
                    <span>热门</span>
                </div>
                <div class="t-item"
                     :class="{'t-item-active': form.type == 1}"
                     @click="changeType(1)">
                    <span>前端</span>
                </div>
                <div class="t-item"
                     :class="{'t-item-active': form.type == 2}"
                     @click="changeType(2)">
                    <span>后端</span>
                </div>
                <div class="t-item"
                     :class="{'t-item-active': form.type == 3}"
                     @click="changeType(3)">
                    <span>嵌入式</span>
                </div>
                <div class="t-item"
                     :class="{'t-item-active': form.type == 4}"
                     @click="changeType(4)">
                    <span>人工智能</span>
                </div>
            </div>
        </div>
        <div class="index-view">
            <div class="v-ad">
                <google-ad :sn="3901268132"></google-ad>
            </div>
            <div class="v-cards">
                <div class="c-item" @click="go(`/article/${item.id}`)" :key="key" v-for="(item, key) in list">
                    <div class="i-author">
                        <div class="a-left">
                            <img :src="item.user.avatar | avatar" alt="">
                            <span>{{item.user.nickname}}</span>
                        </div>
                        <div class="a-right">
                            <span :key="key1" v-for="(item1, key1) in item.tag">{{item1.name}}</span>
                        </div>
                    </div>
                    <div class="i-content" :class="{'i-content-with-cover': item.cover}">
                        <div class="c-left">
                            <div class="l-title">
                                <span>{{item.title}}</span>
                            </div>
                            <div class="l-desc">
                                <p>{{item.text | mdText}}</p>
                            </div>
                        </div>
                        <div class="c-right"
                             :style="{backgroundImage: `url(//cdn.kyeteo.cn/${item.cover})`}" v-if="item.cover"></div>
                    </div>
                    <div class="i-do">
                        <div class="d-item">
                            <i class="iconfont icon-dianzan"></i>
                            <span>{{item.praise_count}}</span>
                        </div>
                        <div class="d-item">
                            <i class="iconfont icon-pinglun"></i>
                            <span>{{item.comment_count}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="v-no-more" v-if="!more">
                <span>没有更多数据啦</span>
            </div>
        </div>
    </layout-default>
</template>

<script>
    export default {
        data() {
            return {
                loaded: false,
                form: {
                    type: 0,
                    sort: 0,
                    index: 1,
                    size: 10
                },
                list: [],
                more: true
            }
        },
        methods: {
            clear() {
                this.form.sort = 0
                this.form.index = 1
                this.form.size = 10
                this.list = []
                this.more = true
                this.loaded = false
            },
            async refresh() {
                this.clear()
                await this.getArticles()
                this.$refs.layout.onTopLoaded()
            },
            async loadMore() {
                if (!this.more) {
                    this.$toast('没有更多文章啦')
                } else {
                    await this.getArticles()
                }
                this.$refs.layout.onBottomLoaded()
            },
            changeType(n) {
                this.clear()
                this.form.type = n
                this.getArticles()
            },
            getArticles() {
                return new Promise(async (resolve) => {
                    const resp = await this.$api.article.getArticles(this.form)
                    if (resp.done) {
                        if ((this.list.length + resp.data.length) === resp.page.count) {
                            this.more = false
                        } else {
                            this.form.index += 1
                        }
                        this.loaded = true
                        resp.data.forEach(i => {
                            this.list.push(i)
                        })
                        resolve()
                    }
                })
            }
        },
        mounted() {
            this.getArticles()
        }
    }
</script>

<style lang="less" scoped>
    .index {
        .index-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background: white;

            .h-search {
                display: flex;
                align-items: center;
                height: 103px;
                padding: 0 30px;

                .s-box {
                    display: flex;
                    align-items: center;
                    flex: 1;
                    height: 80px;
                    padding: 0 30px;
                    border-radius: 10px;
                    background: #f7f7f7;
                    color: #71777c;

                    i {
                        font-size: 50px;
                    }

                    span {
                        font-size: 28px;
                    }
                }

                .s-btn {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    width: 64px;
                    margin-left: 30px;

                    i {
                        font-size: 50px;
                    }
                }
            }

            .h-tab {
                display: flex;
                padding: 0 30px;

                .t-item {
                    display: flex;
                    align-items: center;
                    height: 77px;
                    color: #71777c;

                    &-active {
                        span {
                            color: #007fff;;
                        }
                    }

                    &:not(:first-child) {
                        margin-left: 39px;
                    }
                }
            }
        }

        .index-view {
            padding-top: 180px;

            .v-ad{
                width:100%;
                padding-top: 20px;
            }
            .v-cards {
                padding: 20px 0;

                .c-item {
                    padding-bottom: 30px;
                    background: white;

                    .i-author {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 106px;
                        padding: 0 30px;

                        .a-left {
                            display: flex;
                            align-items: center;

                            img {
                                width: 44px;
                                height: 44px;
                                border-radius: 22px;
                            }

                            span {
                                padding-left: 10px;
                            }
                        }

                        .a-right {
                            span {
                                color: #71777c;

                                &:not(:first-child) {
                                    &:before {
                                        content: '/';
                                    }
                                }
                            }
                        }
                    }

                    .i-content {
                        position: relative;
                        padding: 0 30px;

                        .c-left {

                            .l-title {
                                span {
                                    font-size: 34px;
                                    font-weight: 700;
                                }
                            }

                            .l-desc {
                                padding: 20px 0;
                                color: #71777c;

                                p {
                                    max-height: 200px;
                                    line-height: 50px;
                                    display: -webkit-box;
                                    -webkit-box-orient: vertical;
                                    -webkit-line-clamp: 3;
                                    overflow: hidden;
                                }
                            }
                        }

                        .c-right {
                            position: absolute;
                            top: 50%;
                            right: 30px;
                            transform: translateY(-50%);
                            width: 180px;
                            height: 180px;
                            background-size: auto 100%;
                        }

                        &-with-cover {
                            .c-left {
                                padding-right: 200px;
                            }
                        }
                    }

                    .i-do {
                        display: flex;
                        padding: 0 30px;

                        .d-item {
                            display: flex;
                            align-items: center;
                            color: #71777c;

                            i {
                                font-size: 40px;
                            }

                            span {
                                font-size: 28px;
                            }

                            &:not(:first-child) {
                                margin-left: 40px;
                            }
                        }
                    }

                    &:not(:first-child) {
                        margin-top: 20px;
                    }
                }
            }
            .v-no-more{
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100px;
                span{
                    color:#71777c;
                }
            }
        }
    }
</style>
